<template>
    <div>
        <div class="flex">
            <el-input
                v-model="content"
                type="textarea"
                class="mr-4"
                resize="none"
            />
            <el-button type="primary" @click="send">发送</el-button>
        </div>
        <div>
            <div v-for="item in comments.rows" :key="item.id" class="my-4">
                <div>{{ item.content }}</div>
                <div class="flex">
                    <div class="text-gray-400 mr-4" v-if="item.user">
                        {{ item.user.nickname }}
                    </div>
                    <div class="text-gray-400 mr-4" v-if="item.publishTime">
                        {{
                            dayjs(item.publishTime).format(
                                'YYYY-MM-DD HH:mm:ss'
                            )
                        }}
                    </div>
                </div>
            </div>
        </div>
        <div class="px-12" v-if="comments.count > currentPage * 5">
            <div
                class="text-center bg-gray-50 my-4 p-2 text-gray-500 cursor-pointer rounded"
                @click="nextPage"
            >
                加载更多评论
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { add } from '@/apis/commonCrud'
import { getListUnauth } from '@/apis/unauthCrud'
import { useUserStore } from '@/stores/user'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const props = defineProps<{
    type: 'article' | 'tcase'
    itemId: number
}>()
const dbKey = props.type === 'article' ? 'articleComments' : 'teachCaseComments'
const propName = props.type === 'article' ? 'articleId' : 'teachCaseId'

const content = ref('')
const userStore = useUserStore()
const comments = ref<any>({})
const currentPage = ref(1)

const getData = async (page = 1) => {
    const res = await getListUnauth(
        dbKey,
        {
            [propName]: props.itemId,
            pageSize: 5,
            page,
        },
        [
            { model: 'users', attributes: ['id', 'nickname'], as: 'user' },
            // { model: 'articles', attributes: ['id', 'title'], as: 'article'  }
        ]
    )
    if (res.success) {
        const oldRows = comments.value.rows || []
        comments.value = {
            count: res.data.count,
            rows: [...oldRows, ...res.data.rows],
        }
    }
}

getData()

const nextPage = async () => {
    const newPage = currentPage.value + 1
    const userId = userStore.userInfo?.id
    if (newPage > 1 && !userId) {
        ElMessage.error('请先登录')
        return
    }
    currentPage.value = newPage
    getData(newPage)
}
const send = async () => {
    const userId = userStore.userInfo?.id
    if (!userId) {
        ElMessage.error('请先登录')
        return
    }
    if (!content.value) {
        ElMessage.error('请输入评论内容')
        return
    }
    const res = await add(dbKey, {
        content: content.value,
        userId,
        [propName]: props.itemId,
        publishTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    })
    if (!res.success) {
        ElMessage.error('评论失败')
        return
    }
    ElMessage.success('评论成功')
    getData(1)
    content.value = ''
}
</script>

<style scoped></style>
